<template>
  <div class="son-content">
    <h2>Son</h2>
    <div>值:{{ value }}</div>
    <el-button
      type="primary"
      size="small"
      @click="handleChange"
      >点击改变数据</el-button
    >

    <div>abc:{{ abc }}</div>
    <div>cc:{{ cc }}</div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineModel, watchEffect, ref, watch } from 'vue'
const props = defineProps<{
  abc: number
}>()
const emit = defineEmits(['update:modelValue'])
const value = defineModel({ default: { test: 0 } })

const cc = ref(props.abc)

const { abc } = props
// value.value = { test: 1 }
// const a = () => {
//   value.value.test++

//   return value.value
// }

const handleChange = () => {
  value.value.test++
  value.value = {
    ...value.value
  }

  // console.log(value.value)
}

watch(
  () => abc,
  (val) => {
    console.log(val)
  },
  {
    immediate: true
  }
)
</script>

<style scoped>
.son-content {
  background-color: lightblue;
}
</style>
